<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>中国社区</title>
  <link rel="stylesheet" href="../../css/performance/performance.css">
  <link rel="stylesheet" href="../../css/public/base.css">
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet">
  <script src="../../js/public/jquery-3.3.1.js"></script>
  <script src="../../js/performance/performance.js"></script>
</head>
<body>
<div class="performance">
  <div class="mt-left">
    <ul>
      <li><div><span class="circle"></span><a href="../performance/fundAllocation.html"></a>基金业绩划拨</div></li>
      <li><div><span class="circle"></span><a href="../performance/gameTransfer.html"></a>游戏业绩划拨</div></li>
      <li><div><span class="circle"></span><a href="../performance/gameTransfer.html"></a>基金盘面业绩</div></li>
      <li class="cur"><div><span class="circle"></span><a href="../performance/gameTransfer.html"></a>游戏业绩</div></li>
      <li><div><span class="circle"></span><a href="../performance/gameTransfer.html"></a>业绩分红</div></li>
    </ul>
  </div>
  <div class="performanceContent">
    <div class="operating">
      <div>
        <span>信息查询</span>
        <input type="text" placeholder="请输入...">
      </div>
      <div>
        <span>导入时间</span>
        <input type="text" class="layui-input" id="importTime" placeholder="请输入...">
      </div>
      <div>
        <span>分红时间</span>
        <input type="text" class="layui-input" id="dividendTime" placeholder="请输入...">
      </div>
      <div>
        <div class="searchBtn">查询</div>
        <div class="resetBtn">重置</div>
      </div>
    </div>
    <div class="operateBtn">
      <div class="passBtn">划拨</div>
      <div class="rejectBtn">驳回</div>
      <div class="exportBtn">导出</div>
      <div class="importBtn">导入</div>
    </div>
    <div class="rl-table">
      <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
  </div>
</div>
<script src="../../layui/layui.js"></script>
<script type="text/html" id="barDemo">
<a style="color:#2d528f;margin-right: 30px;" lay-event="detail">划拨</a>
<a style="color:#ff0000;" lay-event="del">驳回</a>
</script>
<script>
layui.use('table', function () {
  var table = layui.table;
  layui.use('table', function () {
    var table = layui.table;
    table.render({
      elem: '#test'
//      , url: '/demo/table/user/'
//        , skin: 'nob'
      , width: '100%'
//        ,limits:[5,10,20,50]
      , cols: [[
        {type: 'checkbox'}
        , {field: 'id', title: '序号', minWidth: 100}
        , {field: 'phone', title: '手机号码', minWidth: 120}
        , {field: 'personalAccount', title: '个人账号', minWidth: 120}
        , {field: 'RSTAmount', title: 'RST总额', minWidth: 115}
        , {field: 'RSTDividend', title: '分红RST', minWidth: 115}
        , {field: 'ratio', title: '比例', minWidth: 100}
        , {field: 'import', title: '导入时间', minWidth: 170, sort: true}
        , {field: 'dividendTime', title: '分红时间', minWidth: 170, sort: true}
        , {field: 'RSTRate', title: 'RST汇率', minWidth: 115}
        , {field: 'operate', title: '操作', minWidth: 130, toolbar: '#barDemo', fixed: 'right'}
      ]]
      , data: [{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      },{
        "id": "01"
        , "phone": 12345678912
        , "personalAccount": "zhangsan001"
        , "RSTAmount": "1200"
        , "RSTDividend": "800"
        , "ratio": "80%"
        , "import": "2018.01.01 18:00:00"
        , "dividendTime": "2018.01.01 18:00:00"
        , "RSTRate": "1:6.8"
      }]
      , page: true
    });
  });
  table.on('tool(test)', function (obj) {
    var data = obj.data;
    if (obj.event === 'detail') {
      layer.msg("划拨成功")
    } else if (obj.event === 'del') {
      layer.open({
        type: 0
        , id: 'turnDown' //防止重复弹出
        , area: ['400px !important', '220px !important']
        , title: "信息"
        , content: '<p style="font-size: 16px;height: 40px;line-height: 40px">确认驳回(驳回后不能再取消驳回)?</p>'
        , btn: ['确定', '取消']
        , btnAlign: 'r' //按钮对齐方式
        ,shade: 0
        //,shadeClose: true
        , move: false
        , resize: false
        , yes: function () {
          layer.closeAll();
          layer.msg("成功驳回")
        }
        , btn2: function () {
          layer.closeAll();
        }
      });
    }
  });
});
$(".importBtn").click(function () {
  var fileBtn = $("input[name=file]");
  var processBar= $("#progressBar");
  var uploadBtn=$("input[name=upload]");
  var canelBtn=$("input[name=cancelUpload]");
  var ot;//上传开始时间
  var oloaded;//已上传文件大小
  fileBtn.change(function() {
    var fileObj = fileBtn.get(0).files[0]; //js获取文件对象
    if (fileObj) {
      var fileSize = getSize(fileObj.size);
      $("label[name=upfileName]").text('文件名：' + fileObj.name);
      $("label[name=upfileSize]").text('文件大小：' + fileSize);
      $("label[name=upfileType]").text('文件类型：' + fileObj.type);
      uploadBtn.attr('disabled', false);
    }
  });
  // 上传文件按钮点击的时候
  uploadBtn.click(function(){
    // 进度条归零
    setProgress(0);
    // 上传按钮禁用
    $(this).attr('disabled', true);
    // 进度条显示
    showProgress();
    // 上传文件
    uploadFile();
  });
  function uploadFile(){
//      var url =GlobalData.UPLOAD;
    var fileObj = fileBtn.get(0).files[0];
    if(fileObj==null){
      $("body").append('<div class="tips error slideInDowns"><i class="iconfont icon-zhifushibai"></i><div class="tip_text warm-box">请选择文件</div></div>');
      return;
    }
    // FormData 对象
    var form = new FormData();
    form.append('file', fileObj); // 文件对象
    // XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    //true为异步处理
    xhr.open('post', url, true);
    //上传开始执行方法
    xhr.onloadstart = function() {
      console.log('开始上传')
      ot = new Date().getTime();   //设置上传开始时间
      oloaded = 0;//已上传的文件大小为0
    };
    xhr.upload.addEventListener('progress', progressFunction, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.send(form);
    function progressFunction(evt) {
      debugger;
      if (evt.lengthComputable) {
        var completePercent = Math.round(evt.loaded / evt.total * 100)
          + '%';
        processBar.width(completePercent);
        processBar.text(completePercent);
        var time = $("#time");
        var nt = new Date().getTime();     //获取当前时间
        var pertime = (nt-ot)/1000;        //计算出上次调用该方法时到现在的时间差，单位为s
        ot = new Date().getTime();          //重新赋值时间，用于下次计算
        var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
        oloaded = evt.loaded;               //重新赋值已上传文件大小
        //上传速度计算
        var speed = perload/pertime;//单位b/s
        var bspeed = speed;
        var units = 'b/s';//单位名称
        if(speed/1024>1){
          speed = speed/1024;
          units = 'k/s';
        }
        if(speed/1024>1){
          speed = speed/1024;
          units = 'M/s';
        }
        speed = speed.toFixed(1);
        //剩余时间
        var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
        $("#showInfo").html(speed+units+'，剩余时间：'+resttime+'s');
      }
    }
    //上传成功后回调
    function uploadComplete(evt) {
      uploadBtn.attr('disabled', false);
      $("body").append('<div class="tips win slideInDowns"><i class="iconfont icon-chenggong"></i><div class="tip_text warm-box">上传成功</div></div>');
      $("#analysisContent").css("display","block");
    }
    //上传失败回调
    function uploadFailed(evt) {
      $("body").append('<div class="tips error slideInDowns"><i class="iconfont icon-zhifushibai"></i><div class="tip_text warm-box">上传失败(上传数据最大不能超过500M)</div></div>');
      console.log('上传失败(上传数据最大不能超过500M) ' + evt.target.responseText);
    }
    //终止上传
    function cancelUpload() {
      xhr.abort();
    }
    //上传取消后回调
    function uploadCanceled(evt) {
      $("body").append('<div class="tips error slideInDowns"><i class="iconfont icon-zhifushibai"></i><div class="tip_text warm-box">上传取消,上传被用户取消或者浏览器断开连接:</div></div>');
      console.log('上传取消,上传被用户取消或者浏览器断开连接:' + evt.target.responseText);
    }
    canelBtn.click(function(){
      uploadBtn.attr('disabled', false);
      cancelUpload();
    })
  }
  function getSize(size) {
    var fileSize = '0KB';
    if (size > 1024 * 1024) {
      fileSize = (Math.round(size / (1024 * 1024))).toString() + 'MB';
    } else {
      fileSize = (Math.round(size / 1024)).toString() + 'KB';
    }
    return fileSize;
  }
  function setProgress(w) {
    processBar.width(w + '%');
  }
  function showProgress() {
    processBar.parent().show();
  }
  function hideProgress() {
    processBar.parent().hide();
  }
  layer.open({
    type: 1
    ,id: 'importing' //防止重复弹出
    ,area: ['560px !important','360px !important']
    ,title: "导入"
    ,content: $('#importContent')
    ,shade: 0
    //,shadeClose: true
    ,move: false
    ,resize: false
  });
})
layui.use('laydate', function () {
  var laydate = layui.laydate;
  laydate.render({
    elem: '#importTime'
    , type: 'datetime'
    , theme: '#2d528f'
    , range: true
  });
  laydate.render({
    elem: '#dividendTime'
    , type: 'datetime'
    , theme: '#2d528f'
    , range: true
  });
});
</script>
</body>
<div id="importContent" style="display:none;">
  <span id="time"></span>
  <div class="row" style="margin: 0 !important;">
    <input class="btn btn-info btn-xs" type="file" name="file" /><br />
    <!--<div class="col-lg-5"
         style="padding-left: 0; padding-right: 0; margin-bottom: 0px;">
      <div class="progress progress-striped active" style="display: ">
        <div id="progressBar" class="progress-bar progress-bar-success"
             role="progressbar" aria-valuemin="0" aria-valuenow="0"
             aria-valuemax="100"></div>
      </div>
    </div>
    &lt;!&ndash; 显示上传速度 &ndash;&gt;
    <div id="showInfo" class="col-lg-2">0KB/s</div>-->
  </div>
  <!-- 显示文件信息 -->
  <div id="showFieInfo" class="row" style="margin: 0 !important;">
    <label name="upfileName"></label><br />
    <label name="upfileSize"></label><br />
    <label name="upfileType"></label><br />
  </div>
  <div class="row" style="text-align: center;margin: 0 !important;">
    <input class="btn btn-success btn-xs" type="button" name="upload" value="上传" />
    <input class="btn btn-success btn-xs" type="button" name="cancelUpload" value="取消" />
  </div>
</div>
</html>